<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
.grid-item-header { grid-area: header; }
.grid-item-menu { grid-area: menu; }
.grid-item-main { grid-area: main; }
.grid-item-right { grid-area: right; }
.grid-item-footer { grid-area: footer; }

.grid-container {
  display: grid;
  grid:
  'header header header header header header'
  'menu main main main main right'
  'menu footer footer footer footer footer';
  grid-gap: 2px;
  background-color: rgb(0, 0, 0);
  padding: 2px;
  grid-template-rows: 6vh 86vh 6vh;
  width: 60%;
  margin: 0 auto;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 1);
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
}

body {
	box-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item-header">头部</div>
  <div class="grid-item-menu">菜单</div>
  <div class="grid-item-main">主要内容区域</div>  
  <div class="grid-item-right">右侧</div>
  <div class="grid-item-footer">底部</div>
</div>
</body>
</html>